/*轮播*/
var mySwiper = new Swiper ('.swiper-container', {

    loop: true, // 循环模式选项
    autoplay:true,

    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination'
    },

    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    }
});
var nav = document.querySelectorAll('.nav > li');
var main = document.querySelectorAll('.content > div');
var picture = document.querySelectorAll('.picture > div');
for(var i = 0; i < nav.length;i++){
    nav[i].index = i;
    picture[i].index = i;
    nav[i].addEventListener('click',function(){
        for(var j = 0; j < nav.length;j++){
            picture[j].classList.remove('active');
            nav[j].classList.remove('btn1');
            main[j].classList.remove('active');
        }
        console.log(this);
        console.log(this.index);
        console.log(this.index);
        this.classList.add('btn1');
        main[this.index].classList.add('active');
        picture[this.index].classList.add('active');
    })
}


var gia = document.querySelectorAll('.navigation > li');
var cent = document.querySelectorAll('.cent > div');
var pht = document.querySelectorAll('.pht > div');
for(var a = 0; a < gia.length;a++){
    gia[a].index = a;
    pht[a].index = a;
    gia[a].addEventListener('click',function(){
        for(var j = 0; j < gia.length;j++){
            pht[j].classList.remove('icont');
            gia[j].classList.remove('btn1');
            cent[j].classList.remove('appear');
        }
        console.log(this);
        console.log(this.index);
        console.log(this.index);
        this.classList.add('btn1');
        cent[this.index].classList.add('appear');
        pht[this.index].classList.add('icont');
    })
}


var ence = document.querySelectorAll('.ence > li');
var tont = document.querySelectorAll('.tont > div');
var oto = document.querySelectorAll('.photo > div');
for(var z = 0; z < ence.length;z++){
    ence[z].index = z;
    oto[z].index = z;
    ence[z].addEventListener('click',function(){
        for(var j = 0; j < ence.length;j++){
            oto[j].classList.remove('block');
            ence[j].classList.remove('btn1');
            tont[j].classList.remove('block');
        }
        console.log(this);
        console.log(this.index);
        console.log(this.index);
        this.classList.add('btn1');
        tont[this.index].classList.add('block');
        oto[this.index].classList.add('block');
    })
}

var nav_too = document.querySelectorAll("#nav-too > li");
var mop = document.querySelector("#too");
window.onscroll = function(){
    console.log(document.body.scrollTop || document.documentElement.scrollTop);
    if(document.body.scrollTop >= 800 || document.documentElement.scrollTop >= 800){
        mop.style.position = 'fixed';
    }else{
        mop.style.position = 'relative';
    }
    if(document.body.scrollTop > 1200 || document.documentElement.scrollTop >= 1200){
        nav_too[0].classList.add("active");
        nav_too[1].classList.remove("active");
        nav_too[2].classList.remove("active");
        nav_too[3].classList.remove("active");
        nav_too[4].classList.remove("active");
        nav_too[5].classList.remove("active");
        nav_too[6].classList.remove("active");
    }
    if(document.body.scrollTop > 1800 || document.documentElement.scrollTop >= 1800){
        nav_too[1].classList.add("active");
        nav_too[0].classList.remove("active");
        nav_too[2].classList.remove("active");
        nav_too[3].classList.remove("active");
        nav_too[4].classList.remove("active");
        nav_too[5].classList.remove("active");
        nav_too[6].classList.remove("active");
    }
    if(document.body.scrollTop > 2400 || document.documentElement.scrollTop >= 2400){
        nav_too[2].classList.add("active");
        nav_too[1].classList.remove("active");
        nav_too[0].classList.remove("active");
        nav_too[3].classList.remove("active");
        nav_too[4].classList.remove("active");
        nav_too[5].classList.remove("active");
        nav_too[6].classList.remove("active");
    }
    if(document.body.scrollTop > 6300 || document.documentElement.scrollTop >= 6300){
        nav_too[3].classList.add("active");
        nav_too[1].classList.remove("active");
        nav_too[2].classList.remove("active");
        nav_too[0].classList.remove("active");
        nav_too[4].classList.remove("active");
        nav_too[5].classList.remove("active");
        nav_too[6].classList.remove("active");
    }
    if(document.body.scrollTop > 7050 || document.documentElement.scrollTop >= 7050){
        nav_too[4].classList.add("active");
        nav_too[1].classList.remove("active");
        nav_too[2].classList.remove("active");
        nav_too[3].classList.remove("active");
        nav_too[0].classList.remove("active");
        nav_too[5].classList.remove("active");
        nav_too[6].classList.remove("active");
    }
    if(document.body.scrollTop > 8600 || document.documentElement.scrollTop >= 8600){
        nav_too[5].classList.add("active");
        nav_too[1].classList.remove("active");
        nav_too[2].classList.remove("active");
        nav_too[3].classList.remove("active");
        nav_too[4].classList.remove("active");
        nav_too[0].classList.remove("active");
        nav_too[6].classList.remove("active");
    }
    if(document.body.scrollTop > 10600 || document.documentElement.scrollTop >= 10600){
        nav_too[6].classList.add("active");
        nav_too[1].classList.remove("active");
        nav_too[2].classList.remove("active");
        nav_too[3].classList.remove("active");
        nav_too[4].classList.remove("active");
        nav_too[5].classList.remove("active");
        nav_too[0].classList.remove("active");
    }
};

var btn1 = document.querySelector("#btn1");
var btn2 = document.querySelector("#btn2");
var btn3 = document.querySelector("#btn3");
var btn4 = document.querySelector("#btn4");
var btn5 = document.querySelector("#btn5");
var btn6 = document.querySelector("#btn6");
var btn7 = document.querySelector("#btn7");
btn1.addEventListener('click', function () {
    document.body.scrollTop = 1201;
    document.documentElement.scrollTop = 1201;
});
btn2.addEventListener('click', function () {
    document.body.scrollTop = 1801;
    document.documentElement.scrollTop = 1801;
});
btn3.addEventListener('click', function () {
    document.body.scrollTop = 2401;
    document.documentElement.scrollTop = 2401;
});
btn4.addEventListener('click', function () {
    document.body.scrollTop = 6301;
    document.documentElement.scrollTop = 6301;
});
btn5.addEventListener('click', function () {
    document.body.scrollTop = 7051;
    document.documentElement.scrollTop = 7051;
});
btn6.addEventListener('click', function () {
    document.body.scrollTop = 8601;
    document.documentElement.scrollTop = 8601;
});
btn7.addEventListener('click', function () {
    document.body.scrollTop = 10601;
    document.documentElement.scrollTop = 10601;
});


